<template>
  <el-dialog :visible="exportOptionDialogVisible"
             title="Export Options"
             :modal='true'
             @close='closeExportOptionDialog'
             append-to-body>
    <el-form :model="exportOptions">
      <el-form-item label="Page orientation:">
        <el-radio v-model="exportOptions.pageOrientation"
                  label="Portrait">Portrait</el-radio>
        <el-radio v-model="exportOptions.pageOrientation"
                  label="Landscape">Landscape</el-radio>
      </el-form-item>
      <el-form-item label="Page Size:">
        <el-select v-model="exportOptions.pageSize">
          <el-option v-for="item in PageSizeOptions"
                     :key="item"
                     :label="item"
                     :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Export Data">
        <el-select v-model="exportOptions.exportData">
          <el-option v-for="item in options"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="closeExportOptionDialog" :loading="loading">Cancel</el-button>
      <el-button type="primary"
                 @click="confirmExport" :loading="loading">Export</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    exportOptionDialogVisible: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
    },
    pages: {}
  },
  computed: {
    options () {
      const base = [
        {
          label: 'Current Page',
          value: 'Current'
        },
        {
          label: 'All Data',
          value: 'All'
        }
      ]
      const pages = Array.from({ length: this.pages }, (_, index) => index + 1).map((item) => {
        return {
          label: `Page ${item}`,
          value: `${item}`
        }
      })
      return base.concat(pages)
    }
  },
  data () {
    return {
      PageSizeOptions: [
        'Letter', 'Note', 'Legal', 'A0', 'A1', 'A2', 'A3', 'A5', 'A6', 'A7', 'A8', 'A9', 'B0', 'B1', 'B2', 'B3', 'B4', 'B5', 'Archa', 'Archb', 'Archc', 'Archd', 'Arche', 'Flsa', 'HalfLetter', 'Letter11x17', 'Ledger'
      ],
      exportOptions: {
        pageOrientation: 'Portrait',
        pageSize: 'Letter',
        exportData: 'Current'
      }
    }
  },
  methods: {
    closeExportOptionDialog () {
      Object.assign(this.$data, this.$options.data())
      this.$emit('closeExportOptionDialog')
    },
    confirmExport () {
      this.$emit('confirmExport', this.exportOptions)
    }
  }

}
</script>

<style lang='scss'>
</style>
